<template>
  <div class="aaax">
    <!-- 头像 -->
    <div class="txiang">
      <!-- 图片 -->
      <div>
        <van-image
          round
          width="10rem"
          height="10rem"
          :src="users.imgAddress || 'https://img01.yzcdn.cn/vant/cat.jpeg'"
        />
      </div>
      <!-- 图片地址 -->
      <div>
        <span>请输入图片在线地址：</span>
        <input type="text" v-model="users.imgAddress" />
      </div>
    </div>
    <!-- 表单 -->
    <div>
      <van-form validate-first>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="users.zhanghao"
          name="pattern"
          label="账号："
          placeholder="请输入账号"
        />
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="users.password"
          name="pattern"
          label="密码："
          placeholder="请输入密码"
        />
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="users.name"
          name="pattern"
          label="名称："
          placeholder="请输入名称"
        />
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="users.phone"
          name="pattern"
          label="手机号："
          placeholder="请输入手机号"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="zhuce"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Register",
  data() {
    return {
      users: {
        zhanghao: "",
        password: "",
        name: "",
        phone: "",
        imgAddress: "https://img01.yzcdn.cn/vant/cat.jpeg",
      },
      pattern: /^1(3|4|5|7|8)\d{9}$/,
    };
  },
  methods: {
    zhuce() {
      let pd = true;
      for (let key in this.users) {
        if (this.users[key] == "") {
          alert("请填写完整表单");
          console.log(key);
          pd = false;
          return;
        }
      }
      if (pd) {
        axios
          .post("http://localhost:8080/user/zhuce", {
            zhanghao: this.users.zhanghao,
            password: this.users.password,
            username: this.users.name,
            phone: this.users.phone,
            img: this.users.imgAddress,
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          })
          .then((res) => {
            alert(res.data.msg);
            this.$router.go(-1)
          });
      }
    },
  },
};
</script>

<style scoped>
.aaax {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 600px;
  justify-content: space-around;
}
.txiang {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>